class Vue {
  //es6class的方法设置语法
  constructor (options) {
    // 1、存储属性
    this.$options = options || {}
    this.$data = options.data || {}
    // 判断el的取值
    const { el } = options
    this.$el = typeof el === 'string' ? document.querySelector(el) : el
  
    // 2将data属性注入到vue实例中
    _proxyData(this, this.$data)
    //*3.创建Observer实例监视data属性变化
    new Observer(this.$data)

    //*4.调用compiler
    new Compiler(this)
  }
}

// 将data的属性注入到Vue实例中
function _proxyData (target, data) {
  Object.keys(data).forEach(key => {
    Object.defineProperty(target, key, {
      enumerable: true,
      configurable: true,
      get(){
        return data[key]
      },
      set(newValue){
        data[key] = newValue
      }
    })
  })
}

